<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>找回密码</title>
    <style>
        /* CSS样式 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            padding: 100px;
        }

        .container {
            background-color: #fff;
            border-radius: 5px;
            padding: 20px;
            max-width: 300px;
            margin: 0 auto;
        }

        input[type=text],
        input[type=password],
        input[type=submit] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        input[type=submit] {
            background-color: #5cb85c;
            color: white;
            cursor: pointer;
        }

        input[type=submit]:hover {
            background-color: #4cae4c;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2>找回密码</h2>
        <form id="verifyCodeForm">
            <label for="email">邮箱:</label>
            <input type="email" id="email" name="email" required>
            <label for="code">验证码:</label>
            <input type="text" id="code" name="code" required>
            <input type="submit" value="验证">
        </form>
        <form id="resetPasswordForm" style="display:block;">
            <label for="newPassword">新密码:</label>
            <input type="password" id="newPassword" name="newPassword" required>
            <input type="submit" value="设置新密码">
        </form>
    </div>

    <script>
        // JS代码
        document.getElementById('verifyCodeForm').onsubmit = function (event) {
            event.preventDefault();
            var email = document.getElementById('email').value;
            var code = document.getElementById('code').value;
            // 调用后端API验证验证码
            verifyCode(email, code);
        };

        document.getElementById('resetPasswordForm').onsubmit = function (event) {
            event.preventDefault();
            var newPassword = document.getElementById('newPassword').value;
            // 调用后端API设置新密码
            resetPassword(newPassword);
        };

        function verifyCode(email, code) {
            fetch('api/verify_code', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ email: email, code: code }),
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        document.getElementById('verifyCodeForm').style.display = 'none';
                        document.getElementById('resetPasswordForm').style.display = 'block';
                    } else {
                        alert('验证码错误，请重新输入');
                    }
                })
                .catch(error => {
                    console.error('验证码验证出错:', error);
                    alert('验证码验证失败，请稍后再试');
                });
        }

        function resetPassword(newPassword) {
            fetch('api/reset_password', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ newPassword: newPassword }),
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('您的密码已成功重置');
                        // 可能还需要跳转到登录页面或者其他页面
                    } else {
                        alert('重置密码失败，请稍后再试');
                    }
                })
                .catch(error => {
                    console.error('重置密码出错:', error);
                    alert('重置密码失败，请稍后再试');
                });
        }
    </script>
</body>

</html>